<template>
  <div class="swiper-border">
    <swiper
        :effect="'cards'"
        :grabCursor="true"
        :modules="modules"
        class="mySwiper"
        ref="myswiper"
        @swiper="onSwiper"
    >

      <swiper-slide
          v-for="(item, index) in QSdata"
          :key="item.id"
          class="view-card"
          :class="{'top': index === currentIndex}"
          :data-index="index"
      >
        <div class="blog-slider__img">


          <img :src="randomImageSrc(index + 1)" alt="">
          <!--              alt="">-->
        </div>
        <div class="card-border">
          <div>
            <div class="card-title">{{ item.title }}</div>
          </div>
          <div class="radio-bord">
            <el-radio-group v-model="QAList[index].A">
              <div v-for="option in item.options" class="options">
                <el-radio @change="changeQAList(index, option.optionId)" :value="option.optionId" size="large">{{ option.title }}</el-radio>
              </div>
            </el-radio-group>
          </div>
        </div>


      </swiper-slide>

      <!-- <swiper-slide>Slide 2</swiper-slide><swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide><swiper-slide>Slide 5</swiper-slide>
      <swiper-slide>Slide 6</swiper-slide><swiper-slide>Slide 7</swiper-slide>
      <swiper-slide>Slide 8</swiper-slide><swiper-slide>Slide 9</swiper-slide> -->
    </swiper>
    <el-button class="btn" style="    margin-left: calc(50% - 40px);
    width: 108px;
    height: 34px;
    border-radius: 20px;" v-loading.fullscreen.lock="fullscreenLoading" v-show="submitButton" @click="getReportHtml()">
      我答完啦！
    </el-button>
    <el-dialog
        v-model="dialogVisible"
        title="Tips"
        width="500"
        :before-close="handleClose"
    >
      <div v-html="resdata"></div>
      <template #footer>
        <div class="dialog-footer">
<!--          <el-button @click="dialogVisible = false">Cancel</el-button>-->
          <el-button type="primary" @click="dialogVisible = false">
            知道啦知道啦
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts">
// Import Swiper Vue.js components
import {Swiper, SwiperSlide, useSwiper} from 'swiper/vue';
import {ref} from 'vue'
// Import Swiper styles
import 'swiper/css';
import type {Swiper as SwiperClass} from 'swiper/types'

import 'swiper/css/effect-cards';
import {Action, ElMessage, ElMessageBox} from 'element-plus'
import './style.css';
import {QSdata} from '../mockData/traveQS.js';
// import required modules
import {EffectCards} from 'swiper/modules';
import {} from 'swiper/vue';
import {post} from '../api/http.js'
import { ElNotification } from 'element-plus'
// import { ElMessageBox } from 'element-plus'
export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      dialogVisible:false,
      fullscreenLoading:false,
      radio1: '1',
      submitButton:false,
      images: [
        'img1.jpg',
        'img2.jpg',
        'img3.jpg',
        'img4.jpg',
        'img5.jpg',
        'img6.jpg',
        'img7.jpg',
        'img8.jpg',
        'img9.jpg',
        'img10.jpg',
        'img11.jpg',
        'img12.jpg',
        'img13.jpg',
        'img14.jpg',
        'img15.jpg',
        'img16.jpg',
        'img17.jpg',
        'img18.jpg',

      ],
      QSdata: QSdata,
      resdata:'',
      currentIndex: 0,
      QAList: Array(36).fill(null).map(() => ({ Q: '', A: '' })),
    }

  },
  mounted() {
    let startOptionId = 2406;

// ���� questions ���飬��Ϊÿ�� option �����µ� optionId
    this.QAList.forEach(question => {
      question.Q = startOptionId++
    });

    console.log(this.QAList, 'this.QAList');
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    randomImageSrc(index) {
      // const randomIndex = Math.floor(Math.random() * this.images.length);
      if(index>=18){
        return `../src/assets/${this.images[index - 18]}`;
      } else if(index>=36){
        return `../src/assets/${this.images[index - 36]}`;
      } else{
        return `../src/assets/${this.images[index]}`;

      }

    },
    changeSwiperPage() {
      console.log(this.$refs.myswiper.$swiper, 'this.$refs.myswiper.$swiper')
    },
    changeQAList(index, value){
      this.QAList[index].A = value;
      console.log(this.QAList)
      if(index == 7 || index == 15 || index == 22 || index == 30){
        ElNotification({
          title: 'biubiubiu~',
          message: '场景关键词卡 + 1   ~',
          type: 'success',
        })
      }
      if(index == 35){
        this.submitButton = true;
      }
    },
    getReportHtml() {
      let flag = true
      console.log('111')
      const url = 'https://www.xinceyan.com/Services/WebService.asmx/GetReportHtml'
      for (const list of this.QAList) {
        if(list.A==""){
          flag = false
          ElMessageBox.alert('请全部答完再进行提交！', '菜瓜提示', {
            // if you want to disable its autofocus
            // autofocus: false,
            confirmButtonText: 'OK',
            callback: (action: Action) => {
              ElMessage({
                type: 'info',
                message: `~~~~~`,
              })
            },
          })
          return
        }
      }
      // this.fullscreenLoading = true
      // const data =
      // {"result":{"MasterID":"56","UserOpenID":"","QAList":[{"Q":"2406","A":"8140"},{"Q":"2407","A":"8142"},{"Q":"2408","A":"8144"},{"Q":"2409","A":"8146"},{"Q":"2410","A":"8149"},{"Q":"2411","A":"8150"},{"Q":"2412","A":"8153"},{"Q":"2413","A":"8154"},{"Q":"2414","A":"8156"},{"Q":"2415","A":"8158"},{"Q":"2416","A":"8160"},{"Q":"2417","A":"8162"},{"Q":"2418","A":"8164"},{"Q":"2419","A":"8166"},{"Q":"2420","A":"8168"},{"Q":"2421","A":"8170"},{"Q":"2422","A":"8172"},{"Q":"2423","A":"8174"},{"Q":"2424","A":"8176"},{"Q":"2425","A":"8178"},{"Q":"2426","A":"8180"},{"Q":"2427","A":"8182"},{"Q":"2428","A":"8184"},{"Q":"2429","A":"8186"},{"Q":"2430","A":"8188"},{"Q":"2431","A":"8190"},{"Q":"2432","A":"8192"},{"Q":"2433","A":"8195"},{"Q":"2434","A":"8197"},{"Q":"2435","A":"8199"},{"Q":"2436","A":"8201"},{"Q":"2437","A":"8203"},{"Q":"2438","A":"8205"},{"Q":"2439","A":"8207"},{"Q":"2440","A":"8208"},{"Q":"2441","A":"8210"}],"RealTest":true}}
      const data ={
        result:{
          MasterID:"56",
          UserOpenID:"",
          QAList: this.QAList,
          RealTest:true
        }
      }

      post(url, data).then(data => {
        console.log(data,'data');
        this.fullscreenLoading = false
        this.dialogVisible = true
        this.resdata = data.d
      }).catch(error => {
        // http.defaults.isRetry ++;
        // console.error('Error:', error);
      });
    }
  },
  computed: {

  },
  setup() {
    const swiper = useSwiper();
    const swiperRef = ref<SwiperClass>();

    function onSwiper(swiper) {
      swiperRef.value = swiper
    }

    return {
      swiperRef,
      modules: [EffectCards],
      swiper
    };
  },
};
</script>

<style lang="scss">

.el-radio__label{
  white-space: break-spaces;
}
.mySwiper {
  .el-radio__label {
    color: #fff;
  }
}

.card-border {

  flex: 1;
  margin-left: 220px;
}

.swiper {
  width: 640px;
  height: 360px;
}

.radio-bord {
  .el-radio-group {
    align-items: flex-start;
    display: inline-flex;
    font-size: 0;
    flex-direction: column;
    align-content: stretch;
    justify-content: center;
    height: 240px;
    justify-content: space-evenly;
  }
}

.mySwiper .swiper-slide-active .el-radio__label {
  opacity: 1;
  transform: translateY(0px);
  font-weight: 900;
  font-size: 15px;
}


.mySwiper .el-radio__label {
  color: #fff;
  opacity: 0;
  transform: translateY(25px);
  transition: all 0.4s;
}

.swiper-cards .swiper-slide-active.swiper-slide {
  overflow: visible;

  .blog-slider__img {
    left: -60px;
    transition: left 0.4s;
  }

  img {
    opacity: 1;
    transition: all 0.4s;
  }
}

.blog-slider__img {
  height: 240px;
  width: 240px;
  position: absolute;
  left: -120px;
  border-radius: 12px;
  overflow: hidden;

  img {
    opacity: 0.1;
    transition: all 0.4s;
    height: 240px;
    width: 240px;

  }
}

.blog-slider__img img{
object-fit: cover;
}
.el-dialog {
  min-width: 980px;
}
</style>